<template>
    <div class="content">
        <div class="headerMy">
        <div class="navMy">
            <div class="nav_left">
                <div class="nav_left_left">
                    <a href="JavaScript:;"><img src="@/assets/img/我的/images/我的_03.png" alt=""></a>
                </div>

                <div class="nav_left_right">
                    <p> <a href="javascript:;">大厨神</a> </p>
                    <a href="javascript:;">188****8888</a>
                </div>
            </div>
            <a href="javascript:;"><img src="@/assets/img/我的/images/我的_06.png" alt=""></a>
        </div>
    </div>
    <ul class="contentMy">
        <li class="content_top">
            <p class="p"><a href="javascript:;">作品收益</a></p>
            <p href=""><a class="a" href="javascript:;">￥120</a></p>
            <div class="content_top_bottom">
                <div class="bottom_left">
                    <p><a href="javascript:;">作品数</a></p>
                    <a href="javascript:;">18</a>
                </div>
                <div class="bottom_right">
                    <p><a href="javascript:;">我的赞</a></p>
                    <a href="javascript:;">1880</a>
                </div>
            </div>
        </li>
        <li class="list">
            <div class="list_top">
                <a href="./my1.html"><img src="@/assets/img/我的/images/我的_11.png" alt=""></a>
                <a href="./my1.html" class="a">我的作品</a>
            </div>
            <a href="./my1.html" class="list_bottom">
                <img src="@/assets/img/我的/images/images/我的_03_03.png" alt="">
            </a>
        </li>
        <li class="list">
            <div class="list_top">
                <a href="./my2.html"><img src="@/assets/img/我的/images/我的_13.png" alt=""></a>

                <a href="./my2.html" class="a">赞与评论</a>
            </div>
            <a href="./my2.html" class="list_bottom">
                <img src="@/assets/img/我的/images/images/我的_03_03.png" alt="">
            </a>
        </li>
        <li class="list">
            <div class="list_top">
                <a href="./my3.html"><img src="@/assets/img/我的/images/我的_17.png" alt=""></a>
                <a href="./my3.html" class="a">联系客服</a>
            </div>
            <a href="./my3.html" class="list_bottom">
                <img src="@/assets/img/我的/images/images/我的_03_03.png" alt="">
            </a>
        </li>
    </ul>
    </div>
</template>
<script>
export default {
    name:'HostMy'
}
</script>
<style lang="">
    *{
margin: 0;
padding: 0;
}
a{
    color: #000;
    text-decoration: none;
}
li{
    list-style-type: none;
}
.headerMy{
    height: 9rem;
    width: 100%;
    background-color: #38d7bf;
}
.navMy{
   width: 90%;
   height: 3.5rem;
    margin: 5%;
    margin-top: 0; 
    padding-top: 1rem;
    margin-bottom: 0;   
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.navMy .nav_left{
    display: flex;
    flex-direction: row;
    
}
.navMy .nav_left .nav_left_left{
    margin: 1rem;
    margin-left: 0.5rem;
    margin-right: 2.5rem;
    border-radius: 50%;
    background-color: #5ddecb;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    /* padding-top: 0.4rem; */
}
.navMy .nav_left .nav_left_left img{
    margin: 0;
    width:1.5rem;
    height: 1.5rem;
}
.navMy .nav_left_right{
display: flex;
flex-direction: column;
justify-content: center;

}
.navMy .nav_left_right p{
    color: #fff;
    letter-spacing: 3px;
    margin: 0;
    font-size: 1.5rem;
}
.navMy .nav_left_right a{
    color: #fff;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}
.navMy img{
    margin: 0.5rem;
    margin-top: 1rem;
    width: 1.2rem;
    height: 1.2rem;
}
.contentMy{
    padding-bottom: 5rem;
    background-color: #f4f4f4;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.contentMy .content_top{
    margin: 0;
    padding: 0;
    border-radius: 10px;
    background-color: #fff;
    margin: 2rem;
    margin-left: 2rem;
    margin-top: -3.4rem;
    margin-bottom: 1rem;
}
.contentMy .content_top .p{
    font-size: 0.8rem;
    margin-top: 0.3rem;
    text-align: center;
    color: #999;
    /* margin-bottom: 0.5rem; */
}
.contentMy .content_top .p a{
    font-size: 0.6rem;
}
.contentMy .content_top p:nth-child(2){
    letter-spacing: -5px;
    /* margin-left: -1rem; */
    text-align: center;
    color: #38d7bf;
    font-size: 3rem;
    margin-bottom: 0.2rem;
    font-size: 1rem;
}
.contentMy .content_top .a{
    letter-spacing: -5px;
    margin-left: -1rem;
    text-align: center;
    color: #38d7bf;
    font-size: 2rem;
    margin-bottom: 1rem;
}
.contentMy .content_top_bottom{
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.contentMy .content_top_bottom .bottom_left p,
.contentMy .content_top_bottom .bottom_right p{
    margin-bottom: 0.5rem;
    color: #999;
}
.contentMy .content_top_bottom .bottom_left a,
.contentMy .content_top_bottom .bottom_right a{
    font-size: 0.5rem;
    color: #000;
    letter-spacing: 1px;
}
.contentMy .content_top_bottom .bottom_left,
.contentMy .content_top_bottom .bottom_right{
    text-align: center;
}
.contentMy .list{
    border-radius: 0.5rem;
    background-color: #fff;
    width: 90%;
    height: 2.5rem;
    line-height: 2.5rem;
    margin: 5%;
    margin-top: 0;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.contentMy .list .list_top img{
    width: 1.5rem;
    height: 1.5rem;
    /* margin: 1rem; */
   
}
.contentMy .list .list_top{
    
    display: flex;
    flex-direction: row;
}
.contentMy .list .list_top a{
    width: 2.5rem;
    padding-left: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* line-height: 5.2rem; */
}
.contentMy .list .list_top a:nth-child(2){
    color: #000;
    width: 5.2rem;
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    /* padding-top: 0.8rem; */
    letter-spacing: 1px;
    /* margin: 1rem; */
    margin-left: 1rem;
    margin-right: 0;
    /* margin-top: -0.7rem; */
    height: 2.5rem;
    line-height: 2.5rem;
}

.contentMy .list  .list_bottom{
    /* width: 5rem; */
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: right;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.5rem;
}
.contentMy .list  .list_bottom img{
    float: left;
    width: 0.8rem;
    height:0.8rem;
    /* margin: 1rem; */
    /* margin-top: 2rem; */
}
</style>